<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->
    <script type="text/javascript">
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        
        const vm = new Vue({
            //el: '#root',
            data: {},
            methods: { //设置函数块
                showInfo1(event){ 
                    alert('我是showInfo1');
                },
                showInfo2(event, a){
                    console.log(event, a);
                    alert('我是showInfo2');
                }//打印参数
            }
        });
        
        window.onload = function() { //页面加载完成在加载该方法
            vm.$mount('#root');
        }
    </script>
</head>
<body>
    <!--
        事件的基本使用：
            1.使用v-on:xxx 或简写的 @xxx 绑定事件,其中xxx是事件名
            2.事件的回调需要配置在methods对象中,最终会在vm上
            3.methods中配置的函数,不要用箭头函数！否则this就不是vm了
            4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
            5.@click="demo" 和 @click="demo($event)" 效果一样，但后者可以传更多参数  
            6.事件的修饰符
                (1)pervent: 阻止默认事件(常用)，如：<a href="http://xxx" @click.prevent="showInfo1">点击</a> 不会触发a标签的本身跳转
                (2)stop: 阻止事件冒泡(常用)、点子元素时阻止父元素事件触发
                (3)once: 事件只触发一次(常用)，往后不在触发
                (4)capture: 使事件为捕获阶段触发, 捕获阶段触发事件：由外向内, 冒泡阶段触发事件：由内向外、需要加到父标签上
                (5)self: 只有event.target是当前操作的元素时才会触发、与stop一样也可以阻止冒泡
                (6)passive: 事件的默认行为立即执行,无需等待事件回调、不常用知道一下就好、一般移动端使用的多
                            一般在使用滚轮事件的时候：@wheel.passive="test()"; 相等于test()里面的代码块变成异步执行了、不影响滚动条卡顿了
                额外补充：事件修饰符可以连续使用、如：@click.prevent.stop  这个意思是阻止了默认事件又阻止了冒泡事件
    -->

    <div id="root">
       <!-- 不简写方式：<button v-on:click="showInfo1">点我提示信息</button> -->
       <a href="http://xxx" @click.prevent.stop="showInfo1">点击</a> <!-- pervent：阻止a标签的默认跳转，stop：阻止冒泡 -->
       <!-- 简写方式 -->
       <button @click="showInfo1">点我提示信息(不传参)</button>
       <button @click="showInfo2($event, 123)">点我提示信息(传参)</button>
    </div>
    
</body>
</html>